<!--新闻详情界面-->
<!DOCTYPE html>
<html lang="en">
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:include="include/admin/adminHeader::html('登陆页')">
    <link href="css/index.css" rel="stylesheet">
</head>

<body>
<div id="workingArea" class="container">
    <div class="row  ">
        <!--布局div-->
        <!--<div style="margin-top: 60px"></div>-->

        <!--导航栏-->
        <div class="col-md-12 column" th:replace="include/admin/adminNavigator::html"></div>

        <!--核心内容显示-->
        <div class="col-md-12 column">

            <!--网页展示-->
            <div class="row container ">
                <!--网页新闻展示列表右侧侧占4个栅格-->
                <div class="col-md-4 col-sm-4 col-xs-4 column " style="background-color: #D1CCC8;height: 400px;">
                    <br>
                    <hr>


                    <div class="col-md-4 col-sm-4 col-xs-4">
                        <img class="img-circle" height="50px" width="50px" :src="'img/user/'+bean.user_write.portrait">
                    </div>
                    <div class="col-md-4 col-sm-4 col-xs-4">
                        <h4><b>{{bean.user_write.realname}}</b></h4>
                    </div>
                    <div class="col-md-4 col-sm-4 col-xs-4"></div>
                    <br>
                    <br>

                    <hr>
                    <div class="col-md-3 col-sm-3 col-xs-3">
                        <h4 class="text-muted text-center">原创</h4>
                        <h4 class="text-muted text-center">4</h4>
                    </div>
                    <div class="col-md-3 col-sm-3 col-xs-3">
                        <h4 class="text-muted text-center">粉丝</h4>
                        <h4 class="text-muted text-center">20w</h4>
                    </div>
                    <div class="col-md-3 col-sm-3 col-xs-3">
                        <h4 class="text-muted text-center">喜欢</h4>
                        <h4 class="text-muted text-center">15</h4>
                    </div>
                    <div class="col-md-3 col-sm-3 col-xs-3-3">
                        <h4 class="text-muted text-center">评论</h4>
                        <h4 class="text-muted text-center">∞</h4>
                    </div>
                    <br>
                    <br>
                    <br>
                    <hr>

                    <div class="col-md-6 col-sm-6 col-xs-6">
                        <div class="col-md-6 col-sm-6 col-xs-6">
                            <h4 class="text-muted text-center">等级</h4>
                        </div>
                        <div class="col-md-6 col-sm-6 col-xs-6">
                            <h4 class="text-muted text-center">B</h4>
                        </div>
                    </div>
                    <div class="col-md-6 col-sm-6 col-xs-6">
                        <div class="col-md-6 col-sm-6 col-xs-6">
                            <h4 class="text-muted text-center">访问</h4>
                        </div>
                        <div class="col-md-6 col-sm-6 col-xs-6">
                            <h4 class="text-muted text-center">2273</h4>
                        </div>
                    </div>

                    <div class="col-md-6 col-sm-6 col-xs-6">
                        <div class="col-md-6 col-sm-6 col-xs-6">
                            <h4 class="text-muted text-center">积分</h4>
                        </div>
                        <div class="col-md-6 col-sm-6 col-xs-6">
                            <h4 class="text-muted text-center">105</h4>
                        </div>
                    </div>

                    <div class="col-md-6 col-sm-6 col-xs-6">
                        <div class="col-md-6 col-sm-6 col-xs-6">
                            <h4 class="text-muted text-center">排名</h4>
                        </div>
                        <div class="col-md-6 col-sm-6 col-xs-6">
                            <h4 class="text-muted text-center">160w+</h4>
                        </div>
                    </div>


                </div>


                <!--网页新闻展示列表左侧占8个栅格-->
                <div class=" col-md-8 col-sm-8 col-xs-8 column">
                    <div class="col-md-offset-1 col-md-11 col-sm-11 col-xs-11" style="background-color: #D1CCC8;height:1000px">
                        <h3 class="text-center" >
                            <b>{{bean.note_title}}</b>
                        </h3>
                        <div class="col-md-12 col-sm-12 col-xs-12" v-html="bean.note">
                            <!--<span v-html="bean.note" ></span>-->
                        </div>
                    </div>
                </div>
            </div>


        </div>
    </div>
</div>


<!--前后端交互-->
<script>
    /*时间格式化 全局过滤器*/
    Vue.filter('dateformat', function (dataStr) {
        return moment(dataStr).format('YYYY-MM-DD HH:mm:ss')
    });

    $(function () {
        /*文档加载开始*/

        /*获取文章id*/
        var nid = Number(getUrlParms("nid"));


        var data4Vue = {
            uri: "new",
            pagination: {},
            beans: [],
            bean: {
                id: 0, user_write: {realname: ""}, refer_time: "", note_type: {id: 0}, note_title: "", note: ""
                , image_url: "", video_url: "", user_auditor: {realname: ""}, auditor_time: "", state: "审核通过"
            },
            state: "审核通过",
            types: [],
            is_search: "",
            keyword: "",
            size: "5",
        };

        //ViewModel
        var vue = new Vue({
            el: '#workingArea',
            data: data4Vue,
            created:function () {
                /*初始化查询结果*/
                this.getNew();
            },
            mounted: function () { //mounted　表示这个 Vue 对象加载成功了

//                /*获取所有分类*/
//                this.getNewType();
            },
            methods: {
                getNew: function () {
                    var url = this.uri + "/" + nid;
                    axios.get(url).then(function (response) {
//                        console.log(response);
                        vue.bean = response.data.data;
                    })
                },
                getNewType: function () {
                    var url = "type";
                    axios.get(url).then(function (response) {
                        vue.types = response.data.data.content;
                        console.log(vue.types);
                    })
                },
                logout: function () {
                    var url = "logout";
                    axios.post(url).then(function (response) {
                        console.log(response.data);
                        if (response.data.code == 0) location.href = "fore_login";
                    });
                },
                /*搜索框的查询*/
                search: function () {
//                    alert(this.keyword);
                    this.is_search = true;
                    var url = this.uri + "_search/" + this.bean.state + "?keyword=" + this.keyword;
                    axios.get(url).then(function (response) {
                        vue.pagination = response.data.data;
                        vue.beans = response.data.data.content;
                    })
                },
                /*导航栏查询*/
                search_type: function (type_name) {
                    this.keyword = type_name;
                    this.search();
                },
                jump: function (page) {
                    jump(page, vue); //定义在adminHeader.html 中
                },
                jumpByNumber: function (start) {
                    jumpByNumber(start, vue);
                }
            }
        });

        /*文档加载结束*/
    });
</script>
</body>
</html>